<template>
  <Tabs @change="tabsChange">
    <template v-for="item in tabList"
              :key="item.key">
      <TabPane :tab="item.name">
        <component :ref="item.ref"
                   :is="item.component" />
      </TabPane>
    </template>
  </Tabs>
</template>
<script lang="ts">
import { Tabs } from 'ant-design-vue';
import { defineComponent, ref, nextTick } from 'vue';
import { tabList } from './data';
import List from './list/index.vue';
import Audit from './audit/index.vue';

export default defineComponent({
  components: {
    Tabs,
    TabPane: Tabs.TabPane,
    List,
    Audit,
  },
  setup() {
    const auditRef = ref<any>(null);
    const listRef = ref<any>(null);
    const tabsChange = (record: number) => {
      nextTick(() => {
        if (record == 1) {
          listRef.value.handleSuccess();
        } else {
          auditRef.value.handleSuccess();
        }
      });
    };
    return {
      auditRef,
      listRef,
      tabList,
      tabsChange,
    };
  },
});
</script>
